import React from 'react';
import { Form, Input, Button, Space, Avatar,notification, message } from 'antd';
import styles from './login.less'
import {
  UserOutlined,
  LockOutlined
} from '@ant-design/icons';
import { history } from 'umi';
import request from '@/utils/request';
import { useEffect, useRef, useState } from 'react';
import logo from '../../assets/image.png'
const Login = () => {
  const [formData, setFormData] = useState({
    sysUserPwd: '',
    sysUserName: ''
  })

  const login = async () => {
    const { navigator } = window;
    const res = await request.post('/sysMain/login', {
      data: {
        sysUserPwd: formData.sysUserPwd,
        terminalType: 0, // 终端类型，1 Web
        sysUserName: formData.sysUserName.replace(/ /g, ''),
        gps: '',
        equNumber: `${navigator.userAgent}`
      }
    })
    if (res && res.error_code === 200) {
      const result = !res.data ? { staffStatus: 0 } : res.data;
      // 获取登录用户的操作权限
      window.localStorage.setItem('x-token', result.accessToken);
      window.localStorage.setItem('userInfo', JSON.stringify(result));
      getCurrentUserAuthority(result);
    } else {
      notification.error({ message: res ? res.error_msg : '登录失败' });
    }
  }

  // 当前登录用户的权限
  const getCurrentUserAuthority = user => {
    request.post(`/system/menu/getSystemMenuTree`).then(res => {
      if (res && res.error_code === 200) {
        const result = !res.data ? [] : res.data;
        window.localStorage.setItem('permissions', JSON.stringify(result.permissions));
        window.localStorage.setItem('authorized', JSON.stringify(result.treeMenus));
        history.push('/dashboard');
        message.success('登录成功');
      } else {
        notification.error({
          message: res ? res.error_msg : '请求错误'
        });
      }
    })
  };

  const useAuth = () => {
    let token = window.localStorage.getItem('x-token');
    return window.localStorage.getItem('x-token') == null ? true : false;
  }


  return (
    <div className={styles.container}>
      <div className={styles.loginLogo}>
        <img src={logo} alt="logo" style={{width: '220px' ,marginTop: '80px'}}/>
        <div style={{fontSize: '20px',color: '#fff',marginTop: '25px',fontWeight: 'bold'}}>用户登录</div>
        <div style={{fontSize: '14px',color: '#fff',marginTop: '10px'}}>USER LOGIN</div>
      </div>
      <div className={styles.loginForm}>
        <Form>
          <Form.Item
            name="sysUserName"
            rules={[{ required: true, message: '请输入用户名称' },
            { pattern: /^[a-zA-Z0-9_-]{4,20}$/, message: '格式不正确请重新输入' }]}
          >
            <Input
              className={styles.loginInput}
              prefix={<Space><Avatar size={24} icon={<UserOutlined />} /></Space>}
              placeholder="请输入用户名称"
              size="large"
              value={formData.sysUserName}
              onChange={(e) => setFormData({
                ...formData,
                sysUserName: e.target.value
              })}
            />
          </Form.Item>

          <Form.Item
            name="sysUserPwd"
            rules={[{ required: true, message: '请输入登录密码' }]}
          >
            <Input
              className={styles.loginInput}
              type="password"
              placeholder="请输入登录密码"
              size="large"
              value={formData.sysUserPwd}
              onChange={(e) => setFormData({
                ...formData,
                sysUserPwd: e.target.value
              })}
              prefix={<Space><Avatar size={24} icon={<LockOutlined />}></Avatar></Space>}
            />
          </Form.Item>

          <Form.Item>
            <Button
              style={{ width: '100%', borderRadius: "150px",height: '50px',fontSize: '20px'}}
              type="primary"
              htmlType="submit"
              onClick={(e) => login(e)}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>

    </div>
  );
};

export default Login;
